﻿<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Areas/CustomerAdmin/Customer.Master" CodeBehind="ChartsDetails.aspx.cs" Inherits="OnlineBusinesses.Areas.CustomerAdmin.Charts.ChartsDetails" %>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="ContentCustomerAdmin">
    <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:10px;">
        <h3>Báo cáo Autoresponder
            <button type="button" class="btn btn-default pull-right hidden-xs hidden-sm" style="margin-right:20px;border-radius:0px;border:1px solid #ddd;padding-top:10px;" value="Back" onclick="history.go(-1);">
                <span class="fa fa-mail-reply" style="font-size:20px;"></span>
            </button>
        </h3>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            var source1 =
            [
                { Browser: 'Gửi thành công', Share: 600 },
                { Browser: 'Email lỗi', Share: 200 },
                { Browser: 'Từ chối nhận tin', Share: 145 }
            ];
            var dataAdapter1 = new $.jqx.dataAdapter(source1, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading '); } });
            // prepare jqxChart settings
            var source2 =
            [
                { Browser: 'Email đã mở', Share: 400 },
                { Browser: 'Email chưa mở', Share: 200 }
            ];
            var dataAdapter2 = new $.jqx.dataAdapter(source2, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading '); } });

            // prepare jqxChart settings
            var settings = {
                title: "Báo cáo gửi Email",
                description: " ",
                enableAnimations: true,
                showLegend: true,
                showBorderLine: false,
                //legendLayout: { left: 700, top: 160, width: 300, height: 200, flow: 'vertical' },
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },

                colorScheme: 'scheme03',
                seriesGroups:
                    [
                        {
                            type: 'donut',
                            offsetX: 'auto',
                            source: dataAdapter1,

                            series:
                                [
                                    {
                                        dataField: 'Share',
                                        displayText: 'Browser',
                                        labelRadius: 120,
                                        initialAngle: 10,
                                        radius: 130,
                                        innerRadius: 90,
                                        centerOffset: 0
                                    }
                                ]
                        },
                        {
                            type: 'donut',
                            offsetX: 'auto',
                            source: dataAdapter2,
                            colorScheme: 'scheme02',

                            series:
                                [
                                    {
                                        dataField: 'Share',
                                        displayText: 'Browser',
                                        labelRadius: 120,
                                        initialAngle: 10,
                                        radius: 70,
                                        innerRadius: 30,
                                        centerOffset: 0
                                    }
                                ]
                        }
                    ]
            };
            // setup the chart
            $('#chartContainer').jqxChart(settings);

            $("#jqxfromdate").jqxDateTimeInput({ width: '120px', height: '32px' });
            $("#jqxtodate").jqxDateTimeInput({ width: '120px', height: '32px' });

        });
    </script>
    <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:0px;">
        <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:0px;padding-bottom:10px;">
            <div class="col-md-6 col-xs-12 col-lg-6 col-sm-12" style="padding:0px;">
                <div class="col-md-12 col-xs-12" id='chartContainer' style="text-align:center;height: 450px;padding:0px;border:1px solid #ddd;">
	            </div>
            </div>
            <div class="col-md-6 col-xs-12 col-lg-6 col-sm-12" style="padding:10px;">
                <div class="col-md-12 col-xs-12" style="max-height: 450px;padding:10px;border:1px solid #ddd">
                    <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:5px;">
                        <div class="col-md-3 col-xs-4 col-lg-3 col-sm-4" style="padding:5px;line-height:32px;text-align:left;">Từ ngày</div>
                        <div class="col-md-3 col-xs-8 col-lg-3 col-sm-8" style="padding:5px;"><div class="pull-right" id="jqxfromdate"></div></div>
                        <div class="col-md-3 col-xs-4 col-lg-3 col-sm-4" style="padding:5px;line-height:32px;text-align:left;">Đến ngày</div>
                        <div class="col-md-3 col-xs-8 col-lg-3 col-sm-8" style="padding:5px;"><div class="pull-right" id="jqxtodate"></div></div>
                    </div>
                    <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:5px;">
                        <div class="col-md-3 col-xs-12 col-lg-3 col-sm-12" style="line-height:32px;padding:5px;">Người dùng</div>
                        <div class="col-md-9 col-xs-12 col-lg-9 col-sm-12" style="padding:0px;">
                            <select class="input_add">
                                <option selected>Tất cả..</option>
                                <option>Nguyễn Văn Tí</option>
                                <option>Huỳnh Văn Bánh</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:5px;">
                        <div class="col-xs-7 col-md-7 col-lg-7 col-sm-7" style="padding:5px 0px;">
                            <a href="#" style="text-decoration:none;color:#333;">
                                <span class="btn btn-default pull-left" style="border-radius:0px;">Xem báo cáo</span>
                                <!-- Get link sand FAmails-->
                            </a>
                        </div>
                        <div class="col-xs-5 col-md-5 col-lg-5 col-sm-5" style="padding:5px 0px;">
                            <span class="btn btn-default pull-right" style="border-radius:0px;background:#0000DD;color:#fff;">Tìm kiếm</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</asp:Content>